<template>
  <div class="homeRegister">
    <el-row :span="24" class="regist-head">
      <div>
        <p>注 册</p>
        <p>欢迎来到**分销系统,请完善资料</p>
      </div>
    </el-row>
    <el-row :span="24" class="regist-main">
    <el-form :rules="rules" ref="ruleForm"  class="login-form">
        <el-form-item>
          <el-input
            placeholder="姓名"
            v-model="name">
          </el-input>
          <i class="fa fa-user   icon-user"></i>
        </el-form-item>
        <el-form-item>
          <el-input
            placeholder="用户名"
            v-model="userName">
          </el-input>
          <i class="fa fa-user   icon-user"></i>
        </el-form-item>
         <el-form-item>
           <el-button class="loginbtn">完 成</el-button>
         </el-form-item>
      </el-form>
    </el-row>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  data () {
    return {
      name: '',
      userName: '',
      rules: {}
    }
  }
}
</script>

<style lang="scss" type="stylesheet/scss">
.homeRegister {
    font-size: 12px;
    .regist-head{
      color:#fff;
      div{
        height: 201px;
        background: url('../../assets/imgs/bg.png') center center no-repeat;
        background-size: cover;
        p{
          font-size: 14px;

        }
        p:first-of-type{
          font:700 16px/80px "微软雅黑";
          margin-bottom: 15px;
        }
      }
    }
    .regist-main{
      margin-top: 10px;
      input{
        width: 90%;
        height: 44px;
        border-radius: 20px;
        text-indent: 34px;
      }
      .el-input__icon{
        right: 0;
        left: 26px;
      }
      .icon-user{
          font-size: 27px;
          color: #bfcbd9;
          position: absolute;
          top: 9px;
          left: 36px;
      }
      .codebtn{
        color:#fff;
        width: 25%;
        height: 44px;
        background-color: #499E41;
        border-radius: 0 20px 20px 0;
        margin-left: -20px;
        border: none;
      }
      .code-input{
        width: 75%;
        float: left;
        margin-left: 5px;
      }
      .code-input input{
        // width: 100%;
        border-radius: 20px 0 0 20px;
      }
      .loginbtn{
        width: 90%;
        height: 44px;
        background-color: #499E41;
        margin-top: 30px;
        border-radius: 20px;
        color:#fff;
        font-size: 16px;
      }
    }
}
</style>
